<template>
  <div>
    <section class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>会议室预定系统欢迎你！</li>
          </ul>
        </div>
        <!-- 根据 isLoggedIn 状态决定显示登录注册盒子还是用户名和退出登录按钮 -->
        <div class="fr" v-if="!isLoggedIn">
          <ul>
            <li>
              <el-dropdown>
                <span>请登录</span>
                <template #dropdown>
                  <el-dropdown-item @click="this.$router.push('/customerlogin')">用户登录</el-dropdown-item>
                  <el-dropdown-item @click="this.$router.push('/adminlogin')">管理员登录</el-dropdown-item>
                  <el-dropdown-item @click="this.$router.push('/stafflogin')">员工登录</el-dropdown-item>
                </template>
              </el-dropdown>
            </li>
            <li></li>
            <li>
              <el-dropdown>
                <span class="style_red">立即注册</span>
                <template #dropdown>
                  <el-dropdown-item @click="this.$router.push('/customerregister')">用户注册</el-dropdown-item>
                  <el-dropdown-item @click="this.$router.push('/staffregister')">员工注册</el-dropdown-item>
                </template>
              </el-dropdown>
            </li>
          </ul>
        </div>
        <div class="fr1" v-if="isLoggedIn">
          <ul>
            <li>
                <img src="../img/avater.jpg"/>
                <span>{{ username }}</span>
            </li>
            <li @click="logout">[退出]</li>
          </ul>
        </div>
      </div>
    </section>
    <header class="header w">
      <div class="logo">
        <img src="../img/logo.png" alt="">
      </div>
      <div class="search">
        <input v-model="searchname" type="search" placeholder="请输入会议室名称" @keyup.enter="gotoSearch()">
        <button @click="gotoSearch()">搜索</button>
      </div>
    </header>
    <div class="nav">
      <div class="w">
        <div class="navitems">
          <ul>
            <li><span :class="[{'active': buttonstatus === 0}]" @click="this.$router.push('/user/roomlistpage');buttonstatus = 0">会议室列表</span></li>
            <li><span :class="[{'active': buttonstatus === 1}]" @click="goOrderPage(1)">我的订单</span></li>
            <li><span :class="[{'active': buttonstatus === 2}]" @click="goOrderPage(2)">个人中心</span></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 会议室筛选区域 -->
    <div class="filter-section" v-if="currentTab === 1">
      <div class="w">
        <el-row :gutter="20">
          <el-col :sm="24" :md="8">
            <el-card>
              <div class="filter-title">预订条件</div>
              <el-form :model="filterForm" label-width="80px">
                <el-form-item label="使用日期">
                  <el-date-picker
                    v-model="filterForm.date"
                    type="date"
                    placeholder="选择日期"
                    :disabled-date="disabledDate"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="开始时间">
                  <el-select v-model="filterForm.startTime" placeholder="选择开始时间" style="width: 100%">
                    <el-option v-for="hour in timeOptions" :key="hour" :label="hour + ':00'" :value="hour" />
                  </el-select>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-select v-model="filterForm.endTime" placeholder="选择结束时间" style="width: 100%">
                    <el-option v-for="hour in timeOptions" :key="hour" :label="hour + ':00'" :value="hour" />
                  </el-select>
                </el-form-item>
                <el-form-item label="参会人数">
                  <el-input v-model.number="filterForm.attendeeCount" placeholder="输入参会人数" />
                </el-form-item>
                <el-form-item label="设备需求">
                  <el-checkbox-group v-model="filterForm.equipments">
                    <el-checkbox label="投影" />投影
                    <el-checkbox label="音响" />音响
                    <el-checkbox label="网络" />网络
                    <el-checkbox label="白板" />白板
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="filterConference">筛选会议室</el-button>
                  <el-button @click="resetFilter">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
     <div class="main-content"> <!-- 确保这个类名正确 -->
      <router-view :key="$route.fullPath"/>
    </div>
    <div :class="{'footer':true,'fixed-footer': isFixedFooter}">
      <div class="w">
        <!-- 这里添加Footer内容 -->
        <p>© {{ new Date().getFullYear() }} 会议室预定系统 版权所有</p>
      </div>
    </div>
    </div>
  </template>
  <script>
import { ElMessageBox } from 'element-plus'; 
  export default {
    name: 'IndexPage',
    data() {
      return {
        buttonstatus: 0,
        isLoggedIn: false,
        username: '',
        avatarPath:'',
        searchname:'',
        RouteState:true,
        isFixedFooter:false,
        filterForm:{},
      };
    },
    created() {
      // 检查本地存储中是否有登录信息
      const token = localStorage.getItem('token');
      const storedUsername = localStorage.getItem('username');
      if (token && storedUsername) {
        this.isLoggedIn = true;
        this.username = storedUsername;

      }
      this.$router.push('/user/roomlistpage')
      
    },
    mounted(){
      window.addEventListener('resize',this.updateFooterPosition);
      window.addEventListener('scroll',this.updateFooterPosition);
      this.updateFooterPosition();
    },
    beforeUnmount() {
      window.removeEventListener('resize',this.updateFooterPosition);
      window.removeEventListener('scroll',this.updateFooterPosition);
    },
    methods: {
      logout() {
        // 清除本地存储中的登录信息
        ElMessageBox({
        message: '确定要退出登录吗？',
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
      }).then(()=>{
        localStorage.removeItem('token');
        localStorage.removeItem('username');
        this.isLoggedIn = false;
        this.username = '';
      }).catch(()=>{
        
      })
        
        // 可以在这里添加跳转到登录页面等其他逻辑
      },
      goOrderPage(index){
        let token = localStorage.getItem('token');
        if (!token) {
          ElMessageBox({
            message: '您尚未登录，是否前往登录？',
            type: 'warning',
            confirmButtonText: '去登录',
            cancelButtonText: '取消',
            showCancelButton: true
          }).then(() => {
            // 点击“去登录”按钮后的操作，这里假设登录页面路径为 '/login'
            this.$router.push('/customerlogin');
          }).catch(() => {
            // 点击“取消”按钮后的操作，这里什么都不做
          });
          return;
        }
        if(index===1){
            this.$router.push('/user/myorderpage');
        }
        if(index===2){
            this.$router.push('/user/personcenterpage');
        }
        
        this.buttonstatus = index;
      },
      gotoSearch(){
        if(this.buttonstatus===0){
           this.$router.push({
          path: '/user/roomlistpage',
          query: {
            keyword: this.searchname,
          }
         })
        }else if(this.buttonstatus===1){
            this.$router.push({
          path: '/user/myorderpage',
          query: {
            keyword: this.searchname,
          }
         })
        }
         
      },
      updateFooterPosition(){
        const contentHeight=document.querySelector('.main-content').offsetHeight;
        const footerHeight=document.querySelector('.footer').offsetHeight;
        const windowHeight=window.innerHeight;
        const totalHeight=contentHeight+footerHeight;
        this.isFixedFooter=totalHeight<windowHeight;
      }
    }
  };
  </script>
  <style scoped>
  @import '../assets/base.css';
  @import '../assets/index.css';
  .filter-section {
  padding: 20px 0;
}

.filter-section .filter-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
  </style>